<template>
	<view class="student-home">
		<u-list @scrolltolower="scrolltolower" :height="'100%'"
			style="position: relative">
			<!-- 老师全部记录时  可选择班级 -->
			<view class="student-loading" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view class="task-list">
				<FilterModal @getFilterData="getRecordFilterData"
					:filterType="['type']" class="type-filter">
				</FilterModal>
				<view class="student-item" v-for="(item, index) in tableList"
					:key="index">
					<view class="item-title">
						<text>{{ item.showMonth }}</text>
					</view>
					<view class="student-item-list">
						<view class="student-item-item"
							v-for="(itm, _index) in item.list"
							:key="itm.studentResultId"
							@click="goInfo(index, _index)">
							<view class="title">
								{{
                                        itm.scope == "grade"
                                            ? "年级考试"
                                            : "班级考试"
                                    }}

								- {{ itm.name }}
							</view>
							<view class="name-time">
								<text>{{ itm.teacherName }}</text>
								<u-line direction="col" length="16rpx"
									hairline="false" margin="16rpx">
								</u-line>
								<text>{{ itm.showUpdateTime }}</text>
							</view>
							<view class="course-num">
								<view class="course">
									<u-icon size="20"
										:name="baseUrl+'https://dev.jyrj360.com/static/uniApp/static/image/menu/job.png'">
									</u-icon>
									<text style="margin-left: 8rpx">
										{{ itm.courseName }}</text>
								</view>
								<view class="num">
									{{ itm.result ? itm.result : "未录入"

                                        }}{{
                                            itm.useLevelFlag
                                                ? ""
                                                : itm.result
                                                ? "分"
                                                : ""
                                        }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="empty" v-if="tableList.length < 1">
					<u-empty mode="data" :text="'暂无记录'"> </u-empty>
				</view>
			</view>
		</u-list>
		<!-- <view class="day-it-list"></view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import FilterModal from "@/pages/achievement/components/FilterModal.vue"

	import { studentPage } from "@/pages/achievement/api/student.js"
	export default {
		components: {
			FilterModal,
		},
		data() {
			return {
				loading: true,
				showClass: false,
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tableList: [],
				type: "",
				showNoMore: false,
			}
		},
		mounted() {
			// this.reset()
			// this.getList()
		},
		computed:{
			baseUrl(){
      return this.$baseUrl
    },
		},
		methods: {
			reset() {
				this.pageNo = 1
				this.tableList = []
				this.showNoMore = false
				this.loading = true
			},
			getRecordFilterData(data) {
				this.type = data.typeActive
				this.pageNo = 1
				this.tableList = []
				this.showNoMore = false
				this.getList()
			},


			async getList() {
				const data = {
					type: this.type,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
				}

				try {
					const resp = await studentPage(data)

					const { data: respData, total } = resp
					if (this.tableList.length > 0) {
						let list = []
						for (let item of this.tableList) {
							const monthList = this.tableList.concat(list).map(
								item => item.month)
							for (let ite of respData?.list) {
								if (item.month == ite.month) {
									// item.list  = item.list.concat(ite.list)
									for (let i of ite.list) {
										item.list.push(i)
									}
								} else {
									if (!monthList.includes(ite.month)) {
										list.push(ite)
									}
								}
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
						list = []
					} else {
						let list = []
						if (respData?.list) {
							for (const item of respData?.list) {
								list.push(item)
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
					}
					console.log("this.tableList", this.tableList)
					this.loading = false
					this.total = respData?.total
				} catch (e) {
					//TODO handle the exception
					this.loading = false
				}
			},
			scrolltolower() {
				this.pageNo += 1
				const page = Math.ceil(this.total / this.pageSize)
				if (this.pageNo > page) {
					if (!this.showNoMore) {
						this.showNoMore = true
						return this.$refs.uToast.show({ message: "没有更多成绩" })
					}
				} else {
					this.getList()
				}
			},

			goInfo(index, index1) {
				console.log(index)
				console.log(index1)
				uni.navigateTo({
					url: `/pages/achievement/pages/student/info?studentResultId=${this.tableList[index].list[index1].studentResultId}`,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.student-home {
		height: 100%;

		.student-loading {
			margin-top: 150rpx;
		}

		.task-list {
			position: relative;
			min-height: 100rpx;

			.type-filter {
				position: absolute;
				right: 24rpx;
				top: 20rpx;
			}
		}

		.student-item {
			padding: 0 30rpx;
		}

		.item-title {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&>text {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.student-item-item {
			box-sizing: border-box;
			height: 242rpx;
			background: #fafafa;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.title {
				line-height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 4rpx;
			}

			.name-time {
				font-size: 26rpx;
				color: #999;
				height: 36rpx;
				line-height: 36rpx;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
			}

			.course-num {
				// width: 100%;
				height: 88rpx;
				background: rgba(255, 137, 72, 0.04);
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx;
			}

			.course {
				display: flex;

				text {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}
			}

			.num {
				font-size: 30rpx;
				font-weight: 600;
				color: #fe4f54;
			}
		}

		.empty {
			margin-top: 150rpx;
		}
	}
</style>
